<template>
  <div style=" padding: 30px">
    <a-card>
      <div class="qu-content">

        <p>【{{ quData.quType}}】{{ quData.content }}</p>
        <div v-if="quData.quType === 1 || quData.quType===3 ">
          <a-radio-group  v-model:value="answerValues[0]" >
            <a-radio v-for="an in quData.answerList" :key="an" value="an.id" >{{an.id}}+"---------"+{{ an.abc }}.{{ an.content }}</a-radio>
          </a-radio-group>
        </div>

        <!-- 多选题 -->
        <div v-if="quData.quType === 2">
          <a-checkbox-group v-model:value="answerValues" readonly>
            <a-checkbox v-for="an in quData.answerList" :key="an" value="an.id">{{ an.abc }}.{{ an.content }}</a-checkbox>
          </a-checkbox-group>
        </div>

        <div v-if="analysisShow" style="margin-top: 20px; color: #1890ff; font-weight: bold">
          正确答案：{{ rightTags.join(' ') }}
        </div>
      </div>
    </a-card>

  </div>
  <a-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px">
    整题解析：
    <p>{{ quData.analysis }}</p>
    <p v-if="!quData.analysis">暂无解析内容！</p>
  </a-card>

  <a-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px;">
    选项解析：
    <template v-for="an in quData.answerList" :key="an">
    <div  v-if="an.analysis" class="qu-analysis-line">
      <p style="color: #555;">{{ an.content }}：</p>
      <p style="color: #1890ff;">{{ an.analysis }}</p>
    </div>
    </template>
    <p v-if="analysisCount === 0">暂无选项解析</p>

  </a-card>

  <div style="padding-top: 30px">
    <a-button type="primary" @click="handNext">继续下一题</a-button>
    <a-button type="info" @click="onCancel">返回</a-button>
  </div>

</template>
<script>


import {message} from "ant-design-vue";
import {  ref } from 'vue';


export default {

  setup() {
    const value = ref<String>('1');
     const examId= '1356425140212076545';
     let quId= '';
     let tags= ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];
     let analysisShow= false;
     let response= {
       "code": 0,
       "data": {
         "analysis": "",
         "answerList": [
           {
             "analysis": "",
             "content": "正确",
             "id": "1461505894155153409",
             "image": "",
             "isRight": true,
             "quId": "1461505894142570497"
           },
           {
             "analysis": "",
             "content": "错误",
             "id": "1461505894159347714",
             "image": "",
             "isRight": false,
             "quId": "1461505894142570497"
           }
         ],
         "content": "咖啡的故乡是非洲吗？",
         "createTime": "2021-11-19 09:25:33",
         "id": "1461505894142570497",
         "image": "",
         "level": 1,
         "quType": 3,
         "remark": "",
         "repoIds": [
           "1265561101609795585"
         ],
         "updateTime": "2021-11-19 09:25:33"
       },
       "msg": "操作成功！",
       "success": true
     };
     let quData= {};
     let answerValues= [];
     let rightValues= [];
     let rightTags= []

    // 清理值
    const clearValues = () => {
      answerValues = []
      rightValues = []
      analysisShow = false
      rightTags = []
    }
    const fetchQuDetail = (id) => {
      // 查找试卷详情
        // 当前赋值
        quId = id
        clearValues()

        // fetchDetail(id).then(response => {
          // 题目信息
          quData = response.data

          // 保存正确答案
          quData.answerList.forEach((an, index) => {
            an.abc = tags[index]

            // 用户选定的
            if (an.isRight) {
              rightValues.push(an.id)
              rightTags.push(an.abc)
            }
          })
        // })
    }
    const fetchNextQu = () => {
        // 查找下一个
        // nextQu(examId, quId).then(response => {
        //   fetchQuDetail(response.data.id)
        // })
      fetchQuDetail("1461505894142570497")
    }
    // onCancel() {
    //   $router.push({ name: 'ListTran' })
    // },
    const handNext = () => {
       console.log("答案-----------",analysisShow)
      // 直接显示下一个
      if (analysisShow) {
        // 正确显示下一个
        fetchNextQu()
      } else {
        // 直接判断正确性
        console.log("答案选择left：",rightValues.join(','))
        console.log("答案选择right：",answerValues.join(','))
        if (rightValues.join(',') === answerValues.join(',')) {
          message.success("回答正确")
          // 正确显示下一个
          fetchNextQu()
        } else {
          // 错误显示解析
          analysisShow = !analysisShow
          message.error("回答错误")
        }
      }
    }
    fetchNextQu()
    return {
       examId,
       quId,
       tags,
       analysisShow,
      response,
       quData,
       answerValues,
       rightValues,
       rightTags,
      value,

      handNext,
    }
  }
}
</script>

<style scoped>


</style>
